<template>
  <div class="hello">
    <div class="border-bottom">
      <sjx_Header/>
    </div>
    <div 
      :style="bannerStyle" 
      class="banner relative">
      <div class="mask formForM"/>
      <div class="login-wrap">
        <div class="left">
          <slider 
            :title="$t('loanMoney.financialSolutions')" 
            :bottom="false" />
            <!-- :parent-amount="Number($store.state.amount)" 
            :parent-period="Number($store.state.period)" -->
        </div>
        <div class="right formForPC">
          <div class="form">
            <h2>Đăng ký</h2>
            <el-form 
              ref="form" 
              :model="form" 
              :rules="rules" 
              :show-message="true" 
              label-position="top">
              <el-form-item 
                :label="$t('login.idCard')" 
                prop="idCard">
                <el-input 
                  v-model="form.idCard" 
                  :placeholder="$t('login.inputYourIdCard')"
                  type="text"/>
              </el-form-item>
              <el-form-item 
                :label="$t('login.phone')" 
                prop="phone">
                <el-input 
                  v-model="form.phone" 
                  :placeholder="$t('login.inputYourPhone')" 
                  :minlength="9" 
                  :maxlength="15" 
                  type="tel"/>
              </el-form-item>
              <el-form-item 
                :label="$t('login.name')" 
                prop="name">
                <el-input 
                  v-model="form.name" 
                  :placeholder="$t('login.inputYourName')"
                  type="text"/>
              </el-form-item>
              <el-form-item class="text-center">
                <el-button 
                  type="primary" 
                  class="grey-9-bg"
                  @click="openUpload('form')">{{ $t('login.registerNow') }}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="formForM">
      <div class="form">
        <h2>Đăng ký</h2>
        <el-form 
          ref="form1" 
          :model="form" 
          :rules="rules" 
          :show-message="true" 
          label-position="top">
          <el-form-item 
            :label="$t('login.idCard')" 
            prop="idCard">
            <el-input 
              v-model="form.idCard" 
              :placeholder="$t('login.inputYourIdCard')"
              type="text"/>
          </el-form-item>
          <el-form-item 
            :label="$t('login.phone')" 
            prop="phone">
            <el-input 
              v-model="form.phone" 
              :placeholder="$t('login.inputYourPhone')" 
              :minlength="9" 
              :maxlength="15" 
              type="tel"/>
          </el-form-item>
          <el-form-item 
            :label="$t('login.name')" 
            prop="name">
            <el-input 
              v-model="form.name" 
              :placeholder="$t('login.inputYourName')"
              type="text"/>
          </el-form-item>
          <el-form-item class="text-center">
            <el-button 
              type="primary" 
              @click="openUpload('form1')">{{ $t('login.registerNow') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="body">
      <div class="body-main">
        <div class="todo1">
          <div class="todo1-1">
            <div class="bg"/>
            <div class="total">{{ $t('home.appliyProcess') }}</div>
          </div>
          <div class="todo1-content">
            <div class="todo1-2">
              <div class="todo1-2-main">
                <ul>
                  <li>1</li>
                  <li/>
                  <li>2</li>
                  <li/>
                  <li>3</li>
                  <li/>
                  <li>4</li>
                  <li/>
                  <li>5</li>
                </ul>
              </div>
            </div>
            <div class="todo1-3">
              <div class="todo1-3-main">
                <ul>
                  <li>
                    <div class="bg1 pic">
                      <img 
                        src="../static/img/zhuce.png" 
                        alt="">
                    </div>
                  </li>
                  <li class="arrow-wrap formForPC"/>
                  <li>
                    <div class="bg1 pic">
                      <img 
                        src="../static/img/kefu.png" 
                        alt="">
                    </div>
                  </li>
                  <li class="arrow-wrap formForPC"/>
                  <li>
                    <div class="bg1 pic">
                      <img 
                        src="../static/img/shenhe.png" 
                        alt="">
                    </div>
                   
                  </li>
                  <li class="arrow-wrap formForPC"/>
                  <li>
                    <div class="bg1 pic">
                      <img 
                        src="../static/img/queren.png" 
                        alt="">
                    </div>
                  </li>
                  <li class="arrow-wrap formForPC"/>
                  <li>
                    <div class="bg1 pic">
                      <img 
                        src="../static/img/daozhang.png" 
                        alt="">
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="todo1-3 half-width">
              <div class="todo1-3-main">
                <ul class="full-width">
                  <li class="p10-0">
                    <div class="title1">{{ $t('home.liucheng1') }}</div>
                    <span class="arrow-wrap formForM"/>
                  </li>
                  <li/>
                  <li class="p10-0">
                    <div class="title1">{{ $t('home.liucheng2') }}</div>
                    <span class="arrow-wrap formForM"/>
                  </li>
                  <li/>
                  <li class="p10-0">
                    <div class="title1">{{ $t('home.liucheng3') }}</div>
                    <span class="arrow-wrap formForM"/>
                  </li>
                  <li/>
                  <li class="p10-0">
                    <div class="title1">{{ $t('home.liucheng4') }}</div>
                    <span class="arrow-wrap formForM"/>
                  </li>
                  <li/>
                  <li class="p10-0">
                    <div class="title1">{{ $t('home.liucheng5') }}</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="todo2">
        <div class="todo2-main">
          <div class="todo1-1">
            <div class="bg"/>
            <div class="total">{{ $t('home.whyLoan') }}</div>
          </div>
          <div class="todo1-3">
            <div class="todo1-3-main">
              <ul>
                <li>
                  <div class="pic">
                    <img 
                      class="bg1" 
                      src="../static/img/file.png" 
                      alt="">
                    <div class="title1">{{ $t('home.transparent') }}</div>
                  </div>
                  <p class="desc1">{{ $t('home.transparentDesc') }}</p>
                </li>
                <li>
                  <div class="pic">
                    <img
                      class="bg1" 
                      src="../static/img/card.png" 
                      alt="">
                    <div class="title1">{{ $t('home.sample') }}</div>
                  </div>
                  
                  <p class="desc1">{{ $t('home.sampleDesc') }}</p>
                </li>
                <li>
                  <div class="pic">
                    <img
                      class="bg1"  
                      src="../static/img/fast.png" 
                      alt="">
                    <div class="title1">{{ $t('home.quick') }}</div>
                  </div>
                  
                  <p class="desc1">{{ $t('home.quickDesc') }}</p>
                </li>
                <li>
                  <div class="pic">
                    <img
                      class="bg1" 
                      src="../static/img/wifi.png" 
                      alt="">
                    <div class="title1">{{ $t('home.convenient') }}</div>
                  </div>
                  
                  <p class="desc1">{{ $t('home.convenientDesc') }}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="todo3">
        <div class="todo3-main">
          <h2>Loại hình cho vay</h2>
          <ul class="flex flex-center flex-wrap">
            <li 
              v-for="(item, i) in loanTypeArr"
              v-if="item.type!==$route.query.type" 
              :key="i">
              <nuxt-link :to="'/home?type='+item.type">
                <img :src="require('../static/img/loanType_'+item.type+'.png')">
                <div>
                  <p class="name">{{ item.title }}</p>
                  <span class="desc">{{ item.desc }}</span>
                </div> 
              </nuxt-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogTableVisible" 
      width="80%" 
      title="" 
      class="modal">
      <div class="wrap-upload">
        <i 
          class="close" 
          @click="dialogTableVisible = false"/>
        <p class="title">{{ $t('home.uploadTitleType'+ loanType) }}</p>
        <div 
          v-for="(item, i) in upoloadList"
          :key="i" 
          class="imgList" >
          <a 
            :style="'background-image: url('+item.imageData+');background-size: cover'" 
            href="javascript:;" 
            class="add-btn">
            <div 
              :class="item.imageData?'':'grey-bg'" 
              class="add-icon">
              <span v-if="!item.imageData">+</span>
              <input 
                type="file" 
                class="updata" 
                accept=".gif,.jpg,.jpeg,.png,.mp4" 
                @change="imgChange(i)">
            </div>
          </a>
          <p>{{ item.title }}</p>
        </div>
        
        <p class="desc">{{ $t('home.uploadDesc') }}</p>
        <el-button 
          type="primary" 
          @click="submit">{{ $t('others.submit') }}</el-button>
      </div>
    </el-dialog>
    <template>
      <sjx_Footer/>
    </template>
  </div>
</template>

<script>
import sjx_Header from '../components/header'
import slider from '../components/slider'
import fillHeader from '../components/fill-header'
import sjx_Footer from '../components/footer'
import route from '../components/route'
import base from '../common/fn.js'
import ImageFile from '../common/image-file'
export default {
  name: 'Home',
  components: {
    sjx_Header,
    slider,
    fillHeader,
    sjx_Footer,
    route
  },
  data() {
    var validatePass = (rule, value, callback) => {
      var reg = /^(?![A-Za-z]+$)(?!\d+$)(?![\W_]+$)\S{6,12}$/
      if (!reg.test(value)) {
        callback(new Error(this.$t('login.passVl1')))
      } else {
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('login.passwordtoo')))
      } else if (value !== this.form.password) {
        callback(new Error(this.$t('login.passVl')))
      } else {
        callback()
      }
    }
    return {
      arr: [1, 2, 3],
      show: false,
      bar: 0,
      form: {
        idCard: '',
        phone: '',
        name: ''
        // note: '',
        // checkPass: '',
        // password: ''
      },
      rules: {
        idCard: [
          {
            required: true,
            message: this.$t('login.inputYourIdCard')
          },
          {
            validator: (rule, value, callback) => {
              if (value.length === 9 || value.length === 12) {
                callback()
              } else {
                callback(new Error(this.$t('home.errorIdCard')))
              }
            },
            trigger: ['blur', 'submit']
          }
        ],
        phone: [
          {
            required: true,
            message: this.$t('login.inputYourPhone'),
            trigger: ['blur', 'submit']
          }
        ],
        name: [
          {
            required: true,
            message: this.$t('login.inputYourName'),
            trigger: ['blur', 'submit']
          }
        ]
        // note: [
        //   {
        //     required: true,
        //     message: this.$t('login.inputYourNote'),
        //     trigger: 'blur'
        //   }
        // // ],
        // password: [{ validator: validatePass, trigger: 'blur' }],
        // checkPass: [{ validator: validatePass2, trigger: 'blur' }]
      },
      dialogTableVisible: false,
      status: '',
      showTimeLabel: '',
      showTime: '',
      noteFlag: true,
      send: this.$t('login.send'),
      currentIndex: 2,
      leftEnable: true,
      rightEnable: true,
      startX: null,
      moveEndX: null,
      bannerStyle: {
        backgroundImage:
          'url(' +
          require('../static/img/loantype_bg_' +
            (this.$route.query.type || 2) +
            '.png') +
          ') ',
        backgroundPosition: 'center center',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover'
      },
      loanTypeArr: [
        {
          type: '2',
          title: this.$t('home.student'),
          desc: this.$t('home.studentDesc')
        },
        {
          type: '6',
          title: this.$t('home.motobike'),
          desc: this.$t('home.motobikeDesc')
        },
        {
          type: '3',
          title: this.$t('home.house'),
          desc: this.$t('home.houseDesc')
        },
        {
          type: '5',
          title: this.$t('home.love'),
          desc: this.$t('home.loveDesc')
        }
        // {
        //   type: '4',
        //   title: this.$t('home.visa'),
        //   desc: this.$t('home.visaDesc')
        // }
      ],
      loanType: this.$route.query.type,
      imgObj1: { imageData: '', imgUrl: '' },
      imgObj2: { imageData: '', imgUrl: '' },
      imgObj3: { imageData: '', imgUrl: '' }
    }
  },
  computed: {
    upoloadList: {
      get() {
        let arr = []
        switch (this.loanType) {
          case '2':
            arr = [
              {
                title: this.$t('home.no0'),
                imageData: this.imgObj1.imageData,
                imgUrl: this.imgObj1.imgUrl
              }
            ]
            break
          case '6':
            arr = [
              {
                title: this.$t('home.no1'),
                imageData: this.imgObj1.imageData,
                imgUrl: this.imgObj1.imgUrl
              },
              {
                title: this.$t('home.no2'),
                imageData: this.imgObj2.imageData,
                imgUrl: this.imgObj2.imgUrl
              }
            ]
            break
          case '3':
            arr = [
              {
                title: this.$t('home.no3'),
                imageData: this.imgObj1.imageData,
                imgUrl: this.imgObj1.imgUrl
              },
              {
                title: this.$t('home.no3'),
                imageData: this.imgObj2.imageData,
                imgUrl: this.imgObj2.imgUrl
              },
              {
                title: this.$t('home.no3'),
                imageData: this.imgObj3.imageData,
                imgUrl: this.imgObj3.imgUrl
              }
            ]
            break
          case '5':
            arr = [
              {
                title: this.$t('home.no4'),
                imageData: this.imgObj1.imageData,
                imgUrl: this.imgObj1.imgUrl
              }
            ]
            break
          case '4':
            arr = [
              {
                title: this.$t('home.no5'),
                imageData: this.imgObj1.imageData,
                imgUrl: this.imgObj1.imgUrl
              }
            ]
            break
        }
        return arr
      },
      set(newValue) {}
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {
        if (this.$route.query.type) {
          this.loanType = this.$route.query.type

          location.replace(location.href)
        } else {
          this.$route.push('/')
        }
      },
      deep: true
    }
  },
  mounted() {
    if (!this.$route.query.type) {
      this.$router.push('/')
    }
    clearInterval() // 清除前一个页面的定时器
  },
  methods: {
    fetchOrder(formStatus) {
      // 第一版表单功能（已废弃）
      // 根据sessionid调用接口获取订单状态
      const self = this
      let option = {
        header: {
          ...base,
          action: 'O0001',
          sessionid: this.$store.state.sessionid
        }
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code == 0) {
          let data = res.data[0]
          if (data) {
            // 如果data存在说明订单信息已存在打开弹框显示订单信息
            if (
              data.status === 1 ||
              data.status === 20 ||
              data.status === 21 ||
              data.status === 30 ||
              data.status === 10
            ) {
              self.status = 'auditing'
            } else if (
              data.status === 31 ||
              data.status === 40 ||
              data.status === 42
            ) {
              self.status = 'crediting'
            } else if (
              data.status === -10 ||
              data.status === -30 ||
              data.status === -20
            ) {
              self.status = 'auditFailed'
            } else if (data.status === -40 || data.status === -41) {
              self.status = 'creditFailed'
            } else if (
              data.status === -50 ||
              data.status === -60 ||
              data.status === -70 ||
              data.status === 43
            ) {
              self.status = 'payWait'
            } else if (data.status === 51) {
              self.status = 'alreadyClear'
            }
            if (
              self.status === 'auditing' ||
              self.status === 'crediting' ||
              self.status === 'auditFailed' ||
              self.status === 'creditFailed'
            ) {
              self.showTimeLabel = 'applyTime'
              self.showTime = data.strCreateTime
            } else if (self.status === 'payWait') {
              self.showTimeLabel = 'shouldPayTime'
              self.showTime = data.strMustRefundTime
            } else if (self.status === 'alreadyClear') {
              self.showTimeLabel = 'payTime'
              self.showTime = data.strLastRefundTime
            }
            this.dialogTableVisible = true
          } else {
            // 否则该账号下不存在订单信息，点击按钮继续填写申请表单信息
            // 参数formStatus保存了用户的表单填写到第几个步骤了
            switch (formStatus) {
              case 1:
                self.$router.push('/basic')
                break
              case 2:
                self.$router.push('/job')
                break
              case 3:
                self.$router.push('/identity')
                break
              case 4:
                self.$router.push('/pay')
                break
              case 5:
                self.$router.push('/pay?open=true')
                break
              case 6:
                self.$router.push('/pay?open=true')
                break
            }
          }
        } else {
          self.$message.error(res.header.msg)
        }
      })
    },
    openUpload(formName) {
      // 提交按钮验证基本信息打开上传图片的的弹框
      this.$refs[formName].validate(valid => {
        if (valid) {
          let option = {
            header: {
              ...base,
              action: 'MT0011',
              sessionid: this.$store.state.sessionid
            },
            phone: this.form.phone,
            userName: this.form.name,
            idCard: this.form.idCard,
            loanType: this.loanType
          }
          this.$axios.$post('', option).then(res => {
            if (res.header.code === 0) {
              this.dialogTableVisible = true
            } else {
              this.$message.error(res.header.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    submit() {
      // 调用保存信息的接口
      let option = {
        header: {
          ...base,
          action: 'MT0008'
        },
        idCard: this.form.idCard,
        loanType: this.loanType,
        onePicUrl: this.upoloadList[0] ? this.upoloadList[0].imgUrl : '',
        twoPicUrl: this.upoloadList[1] ? this.upoloadList[1].imgUrl : '',
        threePicUrl: this.upoloadList[2] ? this.upoloadList[2].imgUrl : ''
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code == 0) {
          this.dialogTableVisible = false
          this.$message.success(this.$t('home.success'))
        } else {
          this.$message.error(res.header.msg)
        }
      })
    },
    jump() {
      window.location.href =
        'https://play.google.com/store/apps/details?id=com.ps.vaydong'
    },
    imgChange(index, ...args) {
      //上传图片
      const self = this
      let e = window.event || arguments[0]
      let image = new ImageFile()
      // 压缩图片
      image.compress({ file: e.target.files[0] }).then(res => {
        const imgRes = res
        const resUrl = imgRes.dataURL
        let option = {
          header: {
            ...base,
            action: 'F0002',
            sessionid: this.$store.state.sessionid
          },
          imageBase64: resUrl.split(',')[1],
          imageType: imgRes.blob.type
        }
        this.$axios.$post('', option).then(res => {
          if (res.header.code == 0) {
            // 通过index参数判断上传的是第几张图片并将base64和上传后的url保存到变量中
            switch (index) {
              case 0:
                this.imgObj1.imageData = resUrl
                this.imgObj1.imgUrl = res.data
                break
              case 1:
                this.imgObj2.imageData = resUrl
                this.imgObj2.imgUrl = res.data
                break
              case 2:
                this.imgObj3.imageData = resUrl
                this.imgObj3.imgUrl = res.data
                break
            }
          } else {
            self.$message.error(res.header.msg)
          }
        })
      })
    }
  }
}
</script>
<style lang="scss">
.el-button span {
  color: #fff;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  text-align: center;
  opacity: 0.75;
  line-height: 600px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-dialog__header {
  display: none;
}
.el-dialog__body {
  margin: 0;
  padding: 0;
  /* width: 1200px;
  height: 630px; */
}
.list-enter-to {
  transition: all 1s ease;
  transform: translateX(0);
}

.list-leave-active {
  transition: all 1s ease;
  transform: translateX(-100%);
}

.list-enter {
  transform: translateX(100%);
}

.list-leave {
  transform: translateX(0);
}

.login-wrap {
  .el-input__inner {
    width: 100%;
    border-radius: 0px;
    border: none;
    border-bottom: 1px solid #ccc;
    line-height: 35px;

    color: #305bff;
    padding: 0 5px;
    font-size: 18px;
  }
  .el-form-item__label {
    font-size: 16px;
    padding: 0 !important;
  }
  .el-form-item__label:before {
    content: '' !important;
  }
}
</style>
<style lang="scss" scoped>
$back: #305bff;
@mixin flex($cen) {
  display: flex;
  justify-content: $cen;
  align-items: center;
}
.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background-color: rgba(0, 0, 0, 0.6);
}

.body {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.box {
  width: 100%;
  height: 100px;
}

.dialog-wrap {
  // max-width: 762px!important;
  // height: 608px;
  .top {
    width: 1249px;
    height: 589px;
    // padding: 20px;
    .status {
      line-height: 50px;
      font-size: 26px;
      font-family: ArialMT;
      color: rgba(51, 51, 51, 1);
    }
    .el-button {
      background: #3462ff;
      width: 140px;
      height: 50px;
      border-radius: 35px;
      box-shadow: 0px 6px 21px rgba(52, 98, 255, 0.82);
      border: none;
    }
  }
}
@media screen and (min-width: 1200px) {
  .el-button span {
    color: #fff !important;
    font-size: 18px;
  }
  .banner {
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 10%;
    padding-bottom: 8%;
    .login-wrap {
      width: 1200px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .left {
        width: 48%;
        height: 100%;
        .title {
          color: #383838;
          margin-top: 0;
        }
      }
      .right {
        height: 100%;
        width: 32%;
        background: #fff;
        box-sizing: border-box;
      }
    }
  }
  .formForM {
    display: none;
  }
  .form {
    padding: 40px;
    box-sizing: border-box;
    h2 {
      font-size: 26px;
      font-weight: 700;
      line-height: 50px;
    }
    .title {
      line-height: 70px;
    }
    .label {
      font-family: ArialMT;
      color: rgba(49, 49, 49, 1);
      line-height: 46px;
      margin-bottom: 12px;
      p {
        color: #313131;
      }
    }
    input.line {
      width: 430px;
      border-bottom: 1px solid #b2b2b2;
      line-height: 35px;
      color: #305bff;
    }
    input.line:focus {
      color: #305bff;
      border-bottom: 1px solid #305bff;
    }
    .cen {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
    }
    .el-button {
      background: #3462ff;
      width: 80%;
      height: 70px;
      background: rgba(52, 98, 255, 1);
      border-radius: 35px;
      box-shadow: 0px 6px 21px rgba(52, 98, 255, 0.82);
      border: none;
    }
    .noteButton {
      width: 27%;
      height: 46px;
      background: #3462ff;
      border-radius: 6px;
      box-shadow: none;
      padding: 0;
    }
    .el-form-item {
      margin-bottom: 20px;
    }
  }
  .body-main {
    min-width: 1200px;
    margin: 0 auto;
  }
  .todo1 {
    width: 100%;
    height: 600px;
    .todo1-1 {
      width: 100%;
      height: 118px;
      position: relative;
      .bg {
        width: 120px;
        margin: 0 auto;
        height: 100%;
      }
      .total {
        width: 600px;
        text-align: center;
        height: 29px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        font-size: 30px;
        color: rgba(51, 51, 51, 1);
      }
    }
    .todo1-2 {
      width: 100%;
      height: 40px;
      margin: 58px 0 45px 0;
      @include flex(center);
      .todo1-2-main {
        width: 900px;
        height: 100%;
        ul {
          @include flex(space-between);
          li:nth-child(odd) {
            width: 40px;
            height: 35px;
            background-color: $back;
            text-align: center;
            line-height: 35px;
            border-radius: 50%;
            color: #fff;
          }
          li:nth-child(even) {
            width: 200px;
            height: 2px;
            border: 2px dashed $back;
          }
        }
      }
    }
    .todo1-3 {
      width: 100%;
      @include flex(center);
      .todo1-3-main {
        width: 1070px;
        height: 100%;
        ul {
          @include flex(space-between);
          li:nth-child(even).arrow-wrap {
            width: 50px;
            height: 50px;
            background-image: url('../static/img/jiantou.png');
            background-size: 100%;
            background-repeat: no-repeat;
          }
          li:nth-child(odd) {
            width: 240px;
            height: 100%;
            @include flex(center);
            flex-wrap: wrap;
            .bg1 {
              width: 150px;
              height: 162px;
            }
            .title1 {
              width: 100%;
              height: 30px;
              font-size: 18px;
              color: #2b2b2b;
              text-align: center;
              font-weight: bold;
            }
            .desc1 {
              width: 100%;
              height: 100px;
              font-size: 16px;
              color: #515151;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .todo2 {
    width: 100%;
    height: 495px;
    background: rgba(239, 247, 255, 1);
    .todo2-main {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      padding: 20px;
      .todo1-1 {
        width: 100%;
        height: 118px;
        position: relative;
        .bg {
          width: 120px;
          margin: 0 auto;
          height: 100%;
        }
        .total {
          width: 600px;
          text-align: center;
          height: 29px;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          font-size: 30px;
          color: rgba(51, 51, 51, 1);
        }
      }
      .todo1-3 {
        width: 100%;
        height: auto;
        @include flex(center);
        .todo1-3-main {
          width: 1070px;
          height: 100%;
          ul {
            @include flex(space-between);
            li {
              width: 80%;
              background: #fff;
              border-radius: 10px;
              height: 240px;
              margin: 20px;
              padding: 30px;
              .pic {
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin-bottom: 20px;
                .bg1 {
                  width: auto;
                  height: 50px;
                }
                .title1 {
                  font-size: 18px;
                  color: #2b2b2b;
                  text-align: center;
                  font-weight: bold;
                }
              }
              .desc1 {
                width: 100%;
                height: 100px;
                font-size: 16px;
                color: #515151;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
  .todo3 {
    .todo3-main {
      padding: 20px;
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      text-align: center;
      h2 {
        font-size: 26px;
        font-weight: 700;
        max-width: 80vh;
        line-height: 65px;
        margin: 0 auto;
        margin-bottom: 45px;
        margin-top: 30px;
      }
      ul {
        margin-bottom: 80px;
        li {
          padding: 20px;
          flex: auto;
          img {
            width: 150px;
          }
          div {
            padding: 20px 0;
            p {
              font-size: 15px;
              font-weight: 700;
              line-height: 50px;
            }
          }
        }
      }
    }
  }
  .wrap-upload {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    padding: 20px 10px 40px;
    .imgList {
      p {
        text-align: center;
        font-size: 14px;
      }
    }
    p.title {
      font-size: 20px;
      line-height: 30px;
      font-weight: 700;
      margin: 20px;
    }
    p.desc {
      font-size: 14px;
      line-height: 30px;
      margin: 30px 0 20px;
      text-align: center;
    }
    .close {
      position: absolute;
      width: 20px;
      height: 20px;
      margin: 10px;
      top: 0;
      right: 0;
      background-image: url('../static/img/close.png');
      background-size: 100%;
      cursor: pointer;
    }
    .el-button {
      width: 150px;
      height: 48px;
    }
    .add-btn {
      width: 320px;
      display: block;
      text-decoration: none;
      margin: 14px 5px;
      height: 200px;
      .red-border {
        border: dashed 2px red;
      }
      .grey-bg {
        border: dashed 2px #c0c4cc;
        background: rgba(243, 246, 255, 1);
      }
      .add-icon {
        width: 320px;
        height: 200px;
        border-radius: 5px;
        position: relative;
        text-align: center;
        span {
          line-height: 200px;
          font-size: 56px;
          color: #ccc;
        }
        input.updata {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          opacity: 0;
          width: 100%;
          overflow: hidden;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .el-button span {
    color: #fff !important;
    font-size: 18px;
  }
  .body-main {
    padding: 30px;
  }
  .banner {
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 10%;
    padding-bottom: 8%;
    .login-wrap {
      margin-top: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .left {
        width: 80%;
        height: 87%;
        .title {
          color: #383838;
          margin-top: 0;
        }
      }
      .right {
        width: 32%;
        background: #fff;
        box-sizing: border-box;
      }
    }
  }
  .formForPC {
    display: none;
  }
  .formForM {
    display: block !important;
    .form {
      width: 70%;
      margin: 0 auto;
      h2 {
        font-size: 20px;
        font-weight: 700;
        line-height: 40px;
      }
      padding: 30px;
      box-sizing: border-box;
      .title {
        line-height: 70px;
      }
      .label {
        font-family: ArialMT;
        color: rgba(49, 49, 49, 1);
        line-height: 46px;
        margin-bottom: 12px;
        p {
          color: #313131;
        }
      }
      input.line {
        width: 430px;
        border-bottom: 1px solid #b2b2b2;
        line-height: 35px;
        color: #305bff;
      }
      input.line:focus {
        color: #305bff;
        border-bottom: 1px solid #305bff;
      }
      .cen {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
      }
      .el-button {
        background: #3462ff;
        width: 60%;
        background: rgba(52, 98, 255, 1);
        border-radius: 35px;
        box-shadow: 0px 6px 21px rgba(52, 98, 255, 0.82);
        border: none;
      }
      .noteButton {
        width: 27%;
        height: 40px;
        background: #3462ff;
        border-radius: 6px;
        box-shadow: none;
        padding: 0;
        // margin-left:6px;
      }
      .el-form-item {
        margin-bottom: 16px;
      }
    }
  }
  .form {
    padding: 40px;
    box-sizing: border-box;
    .title {
      line-height: 70px;
    }
    .label {
      font-family: ArialMT;
      color: rgba(49, 49, 49, 1);
      line-height: 46px;
      margin-bottom: 12px;
      p {
        color: #313131;
      }
    }
    input.line {
      width: 430px;
      border-bottom: 1px solid #b2b2b2;
      line-height: 35px;
      color: #305bff;
    }
    input.line:focus {
      color: #305bff;
      border-bottom: 1px solid #305bff;
    }
    .cen {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
    }
    .el-button {
      background: #3462ff;
      width: 80%;
      height: 70px;
      background: rgba(52, 98, 255, 1);
      border-radius: 35px;
      box-shadow: 0px 6px 21px rgba(52, 98, 255, 0.82);
      border: none;
    }
    .el-form-item {
      margin-bottom: 20px;
    }
  }
  .body-main {
    min-width: 100%;
    margin: 0 auto;
  }
  .todo1 {
    width: 100%;
    height: 600px;
    .todo1-1 {
      width: 100%;
      height: 118px;
      position: relative;
      .bg {
        width: 120px;
        margin: 0 auto;
        height: 100%;
        background-image: url('../static/img/bg3.png');
      }
      .total {
        width: 80%;
        text-align: center;
        height: 29px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        font-size: 30px;
        color: rgba(51, 51, 51, 1);
      }
    }
    .todo1-2 {
      width: 100%;
      height: 40px;
      margin: 58px 0 45px 0;
      @include flex(center);
      .todo1-2-main {
        width: 80%;
        height: 100%;
        ul {
          @include flex(space-between);
          li:nth-child(odd) {
            width: 30px;
            height: 30px;
            background-color: $back;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
            color: #fff;
          }
          li:nth-child(even) {
            width: 20%;
            height: 2px;
            border: 2px dashed $back;
          }
        }
      }
    }
    .todo1-3 {
      width: 100%;
      @include flex(center);
      .todo1-3-main {
        width: 100%;
        height: 100%;
        ul {
          @include flex(space-between);
          li:nth-child(even).arrow-wrap {
            width: 69px;
            height: 52px;
            background-image: url('../static/img/jiantou.png');
            background-size: 100%;
            background-repeat: no-repeat;
          }
          li:nth-child(odd) {
            width: 260px;
            height: 100%;
            @include flex(center);
            flex-wrap: wrap;
            .bg1 {
              width: 100px;
              height: auto;
            }
            .title1 {
              width: 100%;
              height: 30px;
              font-size: 18px;
              color: #2b2b2b;
              text-align: center;
              font-weight: bold;
              margin: 40px 0 20px 0;
            }
            .desc1 {
              width: 100%;
              height: 100px;
              font-size: 16px;
              color: #515151;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .todo2 {
    width: 100%;
    height: 495px;
    background: rgba(239, 247, 255, 1);
    .todo2-main {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      padding: 20px;
      .todo1-1 {
        width: 100%;
        height: 118px;
        position: relative;
        .bg {
          width: 120px;
          margin: 0 auto;
          height: 100%;
        }
        .total {
          width: 600px;
          text-align: center;
          height: 29px;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          font-size: 30px;
          color: rgba(51, 51, 51, 1);
        }
      }
      .todo1-3 {
        width: 100%;
        height: auto;
        @include flex(center);
        .todo1-3-main {
          width: 100%;
          height: 100%;
          ul {
            @include flex(space-between);
            li {
              width: 80%;
              background: #fff;
              border-radius: 10px;
              height: 240px;
              margin: 20px;
              padding: 20px;
              .pic {
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin-bottom: 20px;
                .bg1 {
                  width: auto;
                  height: 40px;
                }
                .title1 {
                  flex: auto;
                  font-size: 18px;
                  color: #2b2b2b;
                  text-align: center;
                  font-weight: bold;
                }
              }
              .desc1 {
                width: 100%;
                height: 100px;
                font-size: 16px;
                color: #515151;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
  .todo3 {
    .todo3-main {
      padding: 20px;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      text-align: center;
      h2 {
        font-size: 26px;
        font-weight: 700;
        max-width: 80vh;
        line-height: 65px;
        margin: 0 auto;
        margin-bottom: 45px;
        margin-top: 30px;
      }
      ul {
        margin-bottom: 80px;
        li {
          padding: 20px;
          flex: 1;
          img {
            width: 150px;
          }
          div {
            padding: 20px 0;
            p {
              font-size: 15px;
              font-weight: 700;
              line-height: 50px;
            }
          }
        }
      }
    }
  }
  .wrap-upload {
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .imgList {
      p {
        text-align: center;
        font-size: 14px;
      }
      .add-btn {
        width: 80%;
        margin: 0 auto;
        .add-icon {
          width: 100%;
        }
      }
    }
    p.title {
      font-size: 20px;
      line-height: 30px;
      font-weight: 700;
      margin: 20px;
    }
    p.desc {
      font-size: 14px;
      line-height: 30px;
      margin: 30px 0 20px;
      text-align: center;
    }
    .close {
      position: absolute;
      width: 20px;
      height: 20px;
      margin: 10px;
      top: 0;
      right: 0;
      background-image: url('../static/img/close.png');
      background-size: 100%;
      cursor: pointer;
    }
    .el-button {
      width: 150px;
      height: 48px;
    }
    .add-btn {
      width: 320px;
      display: block;
      text-decoration: none;
      margin: 14px 5px;
      height: 200px;
      .red-border {
        border: dashed 2px red;
      }
      .grey-bg {
        border: dashed 2px #c0c4cc;
        background: rgba(243, 246, 255, 1);
      }
      .add-icon {
        width: 320px;
        height: 200px;
        border-radius: 5px;
        position: relative;
        text-align: center;
        span {
          line-height: 200px;
          font-size: 56px;
          color: #ccc;
        }
        input.updata {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          opacity: 0;
          width: 100%;
          overflow: hidden;
        }
      }
    }
  }
}
@media only screen and (max-width: 767px) {
  .banner {
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 80px;
    z-index: 11;
    .login-wrap {
      width: 90%;
      background-color: transparent;
      z-index: 999;
      .left {
        width: 100%;
        height: 87%;
        .title {
          color: #fff;
          margin-top: 0;
        }
      }
    }
  }
  .formForM {
    .form {
      border-bottom: 1px dashed;
      h2 {
        font-size: 20px;
        font-weight: 700;
        line-height: 40px;
      }
      padding: 30px;
      box-sizing: border-box;
      .title {
        line-height: 70px;
      }
      .label {
        font-family: ArialMT;
        color: rgba(49, 49, 49, 1);
        line-height: 46px;
        margin-bottom: 12px;
        p {
          color: #313131;
        }
      }
      input.line {
        width: 430px;
        border-bottom: 1px solid #b2b2b2;
        line-height: 35px;
        color: #305bff;
      }
      input.line:focus {
        color: #305bff;
        border-bottom: 1px solid #305bff;
      }
      .cen {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
      }
      .el-button {
        background: #3462ff;
        width: 40%;
        height: 45px;
        background: rgba(52, 98, 255, 1);
        border-radius: 35px;
        box-shadow: 0px 6px 21px rgba(52, 98, 255, 0.82);
        border: none;
        margin-top: 20px;
        font-size: 15px;
      }
      .noteButton {
        width: 27%;
        height: 40px;
        background: #3462ff;
        border-radius: 6px;
        padding: 0;
        font-size: 14px;
        margin-top: 0px;
      }
      .el-form-item__label {
        padding: 0px !important;
      }
      .el-form-item {
        margin-bottom: 16px;
      }
    }
  }
  .body-main {
    width: 100%;
    margin: 0 auto;
  }
  .todo1 {
    width: 100%;
    padding-top: 30px;
    .todo1-1 {
      width: 100%;
      height: 80px;
      position: relative;
      .bg {
        width: 80px;
        margin: 0 auto;
        height: 100%;
        background-image: url('../static/img/bg3.png');
        background-size: cover;
      }
      .total {
        width: 300px;
        text-align: center;
        height: 45px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        font-size: 22px;
        color: rgba(51, 51, 51, 1);
        font-weight: 700;
      }
    }
    .todo1-content {
      display: flex;
      width: 88%;
      margin: 0 auto;
      height: 560px;
      .todo1-2 {
        width: 10%;
        height: auto;
        .todo1-2-main {
          height: 100%;
          @include flex(center);
          ul {
            width: 20px;
            li:nth-child(odd) {
              width: 20px;
              height: 20px;
              background-color: $back;
              text-align: center;
              line-height: 20px;
              border-radius: 50%;
              color: #fff;
            }
            li:nth-child(even) {
              width: 1px;
              height: 86px;
              border: 1px dashed $back;
              position: relative;
              left: 50%;
              margin-left: -1px;
            }
          }
        }
      }
      .half-width {
        width: 65% !important;
      }
      .todo1-3 {
        width: 30%;
        height: auto;
        @include flex(center);
        .todo1-3-main {
          width: 100%;
          height: 100%;
          ul.full-width {
            width: 100%;
          }
          ul {
            display: flex;
            flex-direction: column;
            width: 90px;
            height: 100%;
            li .arrow-wrap {
              width: 26px;
              height: 35px;
              background-image: url('../static/img/jiantou-m.png');
              background-size: 100%;
              background-repeat: no-repeat;
              position: absolute;
              left: 50%;
              bottom: -15px;
              margin: 5px 0;
              margin-left: -15px;
            }
            li:nth-child(odd).p10 {
              padding: 10px;
            }
            li:nth-child(odd) {
              position: relative;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              .title1 {
                width: 100%;
                height: 75px;
                font-size: 14px;
                color: #2b2b2b;
                text-align: center;
                font-weight: bold;
              }
              .desc1 {
                width: 100%;
                font-size: 12px;
                color: #515151;
                text-align: center;
                line-height: 1.2em;
              }
            }
          }
        }
      }
    }
  }
  .todo2 {
    display: none;
  }
  .todo3 {
    .todo3-main {
      padding: 10px;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      text-align: center;
      h2 {
        font-size: 26px;
        font-weight: 700;
        max-width: 80vh;
        line-height: 38px;
        margin: 20px auto;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        padding: 20px 0;
        li {
          width: 50%;
          padding: 10px;
          box-sizing: box-border;
          img {
            width: 100px;
          }
          div {
            p {
              font-size: 14px;
              font-weight: 700;
              line-height: 50px;
            }
          }
        }
      }
    }
  }
  .wrap-upload {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .imgList {
      p {
        text-align: center;
        font-size: 12px;
      }
    }
    p.title {
      font-size: 14px;
      line-height: 30px;
      font-weight: 700;
      margin: 20px;
      text-align: center;
    }
    p.desc {
      font-size: 12px;
      line-height: 30px;
      margin: 30px 0 20px;
      text-align: center;
    }
    .close {
      position: absolute;
      width: 20px;
      height: 20px;
      margin: 10px;
      top: 0;
      right: 0;
      background-image: url('../static/img/close.png');
      background-size: 100%;
      cursor: pointer;
    }
    .el-button {
      width: 150px;
      height: 48px;
    }
    .add-btn {
      width: 60vw;
      display: block;
      text-decoration: none;
      margin: 14px 5px;
      height: 160px;
      .red-border {
        border: dashed 2px red;
      }
      .grey-bg {
        border: dashed 2px #c0c4cc;
        background: rgba(243, 246, 255, 1);
      }
      .add-icon {
        width: 100%;
        height: 160px;
        border-radius: 5px;
        position: relative;
        text-align: center;
        span {
          line-height: 160px;
          font-size: 56px;
          color: #ccc;
        }
        input.updata {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          opacity: 0;
          width: 100%;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
